﻿@{
    Layout = "~/Views/Shared/_LayoutAdminPage.cshtml";
}

@section header{
    <style>


        /* 文件列表item */
        .file-choose-list-item {
            position: relative;
            display: inline-block;
            vertical-align: top;
            padding: 8px 8px;
            margin: 5px 0;
            cursor: pointer;
        }

            .file-choose-list-item:hover {
                background-color: #F7F7F7;
            }

        /* 文件列表图片 */
        .file-choose-list-item-img {
            width: 90px;
            height: 90px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            border-radius: 3px;
            overflow: hidden;
            position: relative;
            background-color: #eee;
        }

            .file-choose-list-item-img.img-icon {
                background-size: inherit;
                background-color: transparent;
            }

        .file-choose-list-item.active .file-choose-list-item-img:after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.3);
        }

        /* 文件列表名称 */
        .file-choose-list-item-name {
            width: 90px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #333;
            font-size: 12px;
            text-align: center;
            margin-top: 12px;
        }

        /* 文件列表复选框 */
        .file-choose-list-item-ck {
            position: absolute;
            right: 8px;
            top: 8px;
        }

            .file-choose-list-item-ck .layui-form-checkbox {
                padding: 0;
            }

        /* 文件列表操作菜单 */
        .file-choose-oper-menu {
            background-color: #fff;
            position: absolute;
            left: 8px;
            top: 8px;
            border-radius: 2px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, .15);
            transition: all .3s;
            overflow: hidden;
            transform: scale(0);
            transform-origin: left top;
            visibility: hidden;
        }

            .file-choose-oper-menu.show {
                transform: scale(1);
                visibility: visible;
            }

        /* 文件列表操作菜单item */
        .file-choose-oper-menu-item {
            color: #555;
            padding: 6px 5px;
            font-size: 14px;
            min-width: 70px;
            text-align: center;
            cursor: pointer;
            display: block;
        }

            .file-choose-oper-menu-item:hover {
                background-color: #eee;
            }

        /** 文件列表为空时样式 */
        .file-choose-empty {
            text-align: center;
            color: #999;
            padding: 50px 0;
        }

            .file-choose-empty .layui-icon {
                font-size: 60px;
                display: block;
                margin-bottom: 8px;
            }
    </style>

}


<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">当前位置：<span id="tv-current-position">/</span></div>
        <div class="layui-card-body">
            <div>
                <button id="file-btn-back" class="layui-btn layui-btn-sm layui-btn-primary icon-btn">
                    <i class="layui-icon">&#xe65c;</i>返回上级
                </button>
                <button id="file-btn-refresh" class="layui-btn layui-btn-sm layui-btn-primary icon-btn">
                    <i class="layui-icon">&#xe669;</i>刷新
                </button>
                <button id="file-btn-createfolder" class="layui-btn layui-btn-sm layui-btn-primary icon-btn">
                    新建文件夹
                </button>
                <button id="file-btn-upload" class="layui-btn layui-btn-sm layui-btn-normal icon-btn">
                    <i class="layui-icon">&#xe681;</i>上传文件
                </button>
                <button id="file-btn-choose" class="layui-btn layui-btn-sm layui-btn-primary icon-btn"
                        style="margin-left: 10px;">
                    <i class="layui-icon">&#xe634;</i>弹窗选择
                </button>
            </div>
            <div id="file-list-group"></div>
        </div>
    </div>
</div>

<script>
    layui.use(['jquery', 'layer', 'element', 'upload', 'admin', 'util', 'fileChoose','notice'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var element = layui.element;
        var upload = layui.upload;
        var admin = layui.admin;
        var util = layui.util;
        var notice = layui.notice;
        var fileChoose = layui.fileChoose;
        var dataList = [];

        // 渲染列表
        function renderList(dir) {
            dir || (dir = $('#tv-current-position').text());
            layer.load(2);
            $.get('/api/admin/getfile', {
                dir: dir
            }, function (res) {
                    layer.closeAll('loading');

                    dataList = res.data;
                    //console.log(dataList);
                var htmlStr = fileChoose.renderList({
                    data: dataList,
                    menu: [{
                        name: '预览',
                        event: 'preview'
                    }, {
                        name: '复制',
                        event: 'copy'
                    }, {
                        name: '<span style="color: red;">删除</span>',
                        event: 'del'
                    }]
                });
                $('#file-list-group').html(htmlStr);
            }, 'json');
        }

        renderList();


        // 列表点击事件
        $(document).off('click.fclip').on('click.fclip', '#file-list-group .file-choose-list-item', function (e) {
            var item = dataList[$(this).data('index')];
            if (item.isDir) {  // 是否是文件夹
                var cDir = $('#tv-current-position').text();
                cDir += (cDir == '/' ? item.name : ('/' + item.name));
                $('#tv-current-position').text(cDir);
                upload.render({ url: '/api/admin/UploadFile?dir=' + cDir});
                renderList(cDir);
            } else {
                var $cMenu = $(this).find('.file-choose-oper-menu');
                $('.file-choose-oper-menu').not($cMenu).removeClass('show');
                $cMenu.toggleClass('show');
                e.stopPropagation();
            }
        });
        // 点击空白隐藏下拉框
        $(document).off('click.fclomp').on('click.fclomp', function (e) {
            $('.file-choose-oper-menu').removeClass('show');
        });

        // 菜单事件监听
        $(document).off('click.fclomip').on('click.fclomip', '#file-list-group .file-choose-oper-menu-item', function () {
            var event = $(this).data('event');
            var dataIndex = $(this).parent().parent().data('index');
            if (event == 'del') {  // 删除
                layer.confirm('确定要删除此文件吗？', { shade: .1 }, function () {
                    $.post('/api/admin/DeleteFile', {
                        name: dataList[dataIndex].url
                    }, function (res) {
                        if (res.code == 1) {
                            renderList();
                            layer.msg(res.message, { icon: 1 });
                        } else {
                            layer.msg(res.message, { icon: 2 });
                        }
                    }, 'json');
                   
                });
            } else if (event == 'preview') {
                window.open(dataList[dataIndex].url);
            } else {
                //console.log(dataList[dataIndex].url);
                copy("", "复制成功:" + dataList[dataIndex].url, dataList[dataIndex].url, 2000);
                //layer.msg('点击了' + event + '，索引' + dataIndex, {icon: 1});
            }
        });

        // 刷新
        $('#file-btn-refresh').click(function () {
            renderList();
        });

        // 返回上级
        $('#file-btn-back').click(function () {
            var cDir = $('#tv-current-position').text();
            if (cDir != '/') {
                cDir = cDir.substring(0, cDir.lastIndexOf('/'));
                cDir || (cDir = '/');
                $('#tv-current-position').text(cDir);
                renderList(cDir);
            }
        });

        
        // 创建文件夹
        $('#file-btn-createfolder').click(function () {
            parent.layui.admin.prompt({
                title: '请输入新文件夹的名称',
            }, function (value, index, elem) {
                    $.post('/api/admin/CreateFolder', {
                        dir: $('#tv-current-position').text(), name: value
                }, function (res) {
                    parent.layer.close(index);
                    if (res.code == 1) {
                        var cDir = $('#tv-current-position').text();
                        renderList(cDir);
                        layer.msg(res.message, { icon: 1 });
                    } else {
                        layer.msg(res.message, { icon: 2 });
                    }
                }, 'json');
            });
        });

        // 上传
        upload.render({
            elem: '#file-btn-upload',
            url: '/api/admin/UploadFile',
            accept: 'file',
            data: {
                dir: function () {
                    return $('#tv-current-position').text();
                }
            },
            done: function (res, index, upload) {
                if (res.code == 1) {
                    var cDir = $('#tv-current-position').text();
                    renderList(cDir);
                    notice.msg(res.message, { icon: 1 });
                } else {
                    notice.msg(res.message, { icon: 2 });
                }
            }
        });

        // 弹窗选择
        $('#file-btn-choose').click(function () {
            console.log(fileChoose);
            fileChoose.open({
                fileUrl: '',
                listUrl: '/api/admin/getfile',
                num: 3,
                dialog: {
                    offset: '60px'
                },
                upload: {
                    data: {
                        dir: function () {
                            return $('#tv-current-position').text();
                        }
                    },
                    url: "/api/admin/UploadFile2"
                },
                onChoose: function (urls) {
                    layer.msg('你选择了：' + JSON.stringify(urls), {icon: 1});
                }
            });
        });


        function copy(imgUrl, text, copyUrl, tipTime) {
            var URL = copyUrl == "" ? window.location.href.split('#')[0] : copyUrl;
            $("#shareText").val(URL);
            var IMG = imgUrl == "" ? "" : '<img style="width: 22px;" src="' + imgUrl + '">';
            var tipsHtml = '<div id="share-tips" style="position: fixed;top: 50%;left:50%;background: rgba(0,0,0,.5);border-radius: 4px;margin: 0 auto;color: #fff;z-index: 9999;padding: 5px 10px;font-size: 14px;text-align: center;transform: translate(-50%,-50%);">' +
                IMG +
                '<p>' + text + '</p>' +
                '</div>';
            var u = navigator.userAgent;
            var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
            var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
            if (isAndroid) {
                //console.log("isAndroid");
                //$("#shareText").select();
                //document.execCommand("copy", false, null);
                //$("body").append(tipsHtml);
                //setTimeout(function () {
                //    $("#share-tips").remove();
                //}, tipTime);
                console.log("isAndroid");
                var input = document.createElement('input');
                input.setAttribute('readonly', 'readonly');
                input.setAttribute('value', URL);
                document.body.appendChild(input);
                input.select();
                input.setSelectionRange(0, 9999);
                if (document.execCommand('copy')) {
                    document.execCommand('copy');
                }
                document.body.removeChild(input);
                $("body").append(tipsHtml);
                setTimeout(function () {
                    $("#share-tips").remove();
                }, tipTime);
            }
            if (isIOS) {
                console.log("isIOS");
                var input = document.createElement('input');
                input.setAttribute('readonly', 'readonly');
                input.setAttribute('value', URL);
                document.body.appendChild(input);
                input.select();
                input.setSelectionRange(0, 9999);
                if (document.execCommand('copy')) {
                    document.execCommand('copy');
                }
                document.body.removeChild(input);
                $("body").append(tipsHtml);
                setTimeout(function () {
                    $("#share-tips").remove();
                }, tipTime);
            }
            if ((!isAndroid && !isIOS)) {
                console.log("isPC");
                $("#shareText").select();
                document.execCommand("copy", false, null);
                $("body").append(tipsHtml);
                setTimeout(function () {
                    $("#share-tips").remove();
                }, tipTime);
            }
        }
    });
</script>